<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">产品名称</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.productName" placeholder="产品名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%">产品类型名称</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.prdTypeId">
              <Option v-for="p in ProductTypeListArr" :value="p.id" :key="p.createTime">{{p.prdTypeName}}</Option>
            </Select>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">是否上架</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.releaseFlag">
              <Option  value="1" >上架</Option>
              <Option  value="0" >下架</Option>
            </Select>
          </Col>
          <Col span="11" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Form ref="addForm" :model="addForm"  :label-width="120" inline>
          <FormItem label="产品类型名称" prop="prdTypeId">
            <Select  style="width:150px" v-model="addForm.prdTypeId" @on-change="selectTagById">
              <Option v-for="p in ProductTypeListArr" :value="p.id" :key="p.createTime">{{p.prdTypeName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="一级标签" prop="tag">
            <Select  style="width:150px" multiple  v-model="addForm.tag" @on-change="selectSonTag">
              <Option v-for="p in tagsArr" :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="二级标签" prop="tag">
            <Select  style="width:150px" multiple v-model="addForm.sontag">
              <Option v-for="p in sonTags" :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="产品名称" prop="productName">
            <Input v-model="addForm.productName" style="width:150px"></Input>
          </FormItem>
          <FormItem label="服务类型名称" prop="serviceType">
            <Select  style="width:150px" v-model="addForm.serviceType">
              <Option v-for="p in serviceTypeArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="产品可检验人数" prop="productName">
            <Input v-model="addForm.checkuserNum" style="width:150px"></Input>
          </FormItem>
          <FormItem label="是否空腹" prop="limosis">
            <Select  style="width:150px" v-model="addForm.limosis">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="是否空腹其他选项" prop="limosisOther">
            <Input v-model="addForm.limosisOther" style="width:150px"></Input>
          </FormItem>
          <FormItem label="市场价" prop="marketPrice">
            <Input v-model="addForm.marketPrice" style="width:150px"></Input>
          </FormItem>
          <FormItem label="价格" prop="price">
            <Input v-model="addForm.price" style="width:150px"></Input>
          </FormItem>
          <FormItem label="标本要求" prop="specimenRequired">
            <Select  style="width:150px" v-model="addForm.specimenRequired">
              <Option v-for="p in specimenTypeArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="出报告时间" prop="reportTime">
            <Input v-model="addForm.reportTime" style="width:150px"></Input>
          </FormItem>
          <FormItem label="使用人群" prop="prdUsers">
            <Select  style="width:150px" v-model="addForm.prdUsers">
              <Option v-for="p in prdUsersArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="采样要求" prop="samplingRequired">
            <Input v-model="addForm.samplingRequired" style="width:150px"></Input>
          </FormItem>
          <FormItem label="标本保存" prop="specimenSave">
            <Input v-model="addForm.specimenSave" style="width:150px"></Input>
          </FormItem>
          <FormItem label="是否上架" prop="releaseFlag">
            <Select  style="width:150px" v-model="addForm.releaseFlag">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="是否特检">
            <Select  style="width:150px" v-model="addForm.specialFlag">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="产品描述" prop="productDes">
            <Input v-model="addForm.productDes" style="width:433px" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </FormItem>
          <FormItem label="临床意义">
            <Input v-model="addForm.clinicalValue" style="width:433px" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </FormItem>
          <FormItem label="首焦图">
            <Upload
              :on-success = "uploadSucc"
              action="https://wx.ailabcare.com/clinicalmall-web/file/upload">
              <div style="padding: 20px 0;width:433px;border:1px dashed #ddd;text-align: center" v-if="pic">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click files here to upload</p>
              </div>
              <div><img :src="addForm.productFirstPic" alt="首焦图" v-if="!pic" style="padding: 20px 0;width:433px;border:1px dashed #ddd;"></div>
            </Upload>
          </FormItem>
          <FormItem label="产品图文">
            <div style="width:433px;text-align: center" v-model="addForm.productGraphics">
              <!--<router-view/>-->
              <Row :gutter="20">
                <Col :span="24" >
                <!--<vue-tinymce-->
                                              <!--ref="tinymce"-->
                                              <!--v-model="content1"-->
                                              <!--:setting="setting1">-->
              <!--</vue-tinymce>-->
                <vue-editor v-model="content1" useCustomImageHandler  @imageAdded="handleImageAdded"></vue-editor>
                </Col>
                <!--<Col span="12">-->
                <!--<vue-tinymce-->
                <!--ref="tinymce"-->
                <!--v-model="content2"-->
                <!--:setting="setting2" >-->
                <!--</vue-tinymce >-->
                <!--</Col>-->
              </Row >
            </div>
          </FormItem>
      </Form>
      </Modal>

      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editok"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Form ref="addForm" :model="editForm"  :label-width="120" inline>
          <FormItem label="产品类型名称" >
            <Select  style="width:150px" v-model="editForm.prdTypeId" @on-change="selectTagById">
              <Option v-for="p in ProductTypeListArr" :value="p.id" :key="p.createTime">{{p.prdTypeName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="一级标签" >
            <Select  style="width:150px" multiple v-model="editForm.tag" @on-change="selectSonTag">
              <Option v-for="p in tagsArr" :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select>

          </FormItem>
          <FormItem label="二级标签" >
            <Select  style="width:150px" multiple v-model="editForm.sontag">
              <Option v-for="p in sonTags" :value="p.id" :key="p.id">{{p.typeTagName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="产品名称" >
            <Input v-model="editForm.productName" style="width:150px"></Input>
          </FormItem>
          <FormItem label="服务类型名称" prop="serviceType">
            <Select  style="width:150px" v-model="editForm.serviceType">
              <Option v-for="p in serviceTypeArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="产品可检验人数" prop="productName">
            <Input v-model="editForm.checkuserNum" style="width:150px"></Input>
          </FormItem>
          <FormItem label="是否空腹" prop="limosis">
            <Select  style="width:150px" v-model="editForm.limosis">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="是否空腹其他选项" prop="limosisOther">
            <Input v-model="editForm.limosisOther" style="width:150px"></Input>
          </FormItem>
          <FormItem label="市场价" prop="marketPrice">
            <Input v-model="editForm.marketPrice" style="width:150px"></Input>
          </FormItem>
          <FormItem label="价格" prop="price">
            <Input v-model="editForm.price" style="width:150px"></Input>
          </FormItem>
          <FormItem label="标本要求" prop="specimenRequired">
            <Select  style="width:150px" v-model="editForm.specimenRequired">
              <Option v-for="p in specimenTypeArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="出报告时间" prop="reportTime">
            <Input v-model="editForm.reportTime" style="width:150px"></Input>
          </FormItem>
          <FormItem label="使用人群" prop="prdUsers">
            <Select  style="width:150px" v-model="editForm.prdUsers">
              <Option v-for="p in prdUsersArr" :value="p.dataCode" :key="p.id">{{p.dataName}}</Option>
            </Select>
          </FormItem>
          <FormItem label="采样要求" >
            <Input v-model="editForm.samplingRequired" style="width:150px"></Input>
          </FormItem>
          <FormItem label="标本保存" >
            <Input v-model="editForm.specimenSave" style="width:150px"></Input>
          </FormItem>
          <FormItem label="是否上架" >
            <Select  style="width:150px" v-model="editForm.releaseFlag">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="是否特检">
            <Select  style="width:150px" v-model="editForm.specialFlag">
              <Option  value="1">是</Option>
              <Option  value="0">否</Option>
            </Select>
          </FormItem>
          <FormItem label="产品描述" >
            <Input v-model="editForm.productDes" style="width:433px" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </FormItem>
          <FormItem label="临床意义">
            <Input v-model="editForm.clinicalValue" style="width:433px" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </FormItem>
          <FormItem label="首焦图">
            <Upload
              :on-success = "uploadSucc1"
              action="https://wx.ailabcare.com/clinicalmall-web/file/upload">
              <div style="padding: 20px 0;width:433px;border:1px dashed #ddd;text-align: center" v-if="pic1">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click files here to upload</p>
              </div>
              <div><img :src="editForm.productFirstPic" alt="首焦图" v-if="!pic1" style="padding: 20px 0;width:433px;border:1px dashed #ddd;"></div>
            </Upload>
          </FormItem>
          <FormItem label="产品图文">
            <div style="width:433px;text-align: center" v-model="editForm.productGraphics">
              <!--<router-view/>-->
              <Row :gutter="20">

                <Col :span="24" >
                <vue-editor v-model="content2" useCustomImageHandler  @imageAdded="handleImageAdded"></vue-editor>
                <!--<vue-tinymce-->
                <!--ref="tinymce"-->
                <!--v-model="content2"-->
                <!--:setting="setting1">-->
              <!--</vue-tinymce>-->
                </Col>
                <!--<Col span="12">-->
                <!--<vue-tinymce-->
                <!--ref="tinymce"-->
                <!--v-model="content2"-->
                <!--:setting="setting2" >-->
                <!--</vue-tinymce >-->
                <!--</Col>-->
              </Row >
            </div>
          </FormItem>
        </Form>
      </Modal>


      <Modal
        v-model="product"
        title="配置项目"
        @on-ok="productok"
        @on-cancel="cancel('您取消了配置操作')" width="600" >
        <Transfer
          :data="productData"
          :target-keys="productData2"
          filterable
          :filter-method="filterMethod"
          @on-change="handleChange2" :titles="productRole"></Transfer>
      </Modal>
      <Modal
        v-model="tips"
        title="提示"
        @on-ok="tipsok"
        @on-cancel="cancel('您取消了产品配置操作')">
        <p><Icon type="information-circled" color="blue" size="24" style="margin-right: 10px"></Icon>确定配置产品？</p>

      </Modal>

      <Modal
        v-model="detail"
        title="产品详情" width="600">
        <Table :data="detailData" :columns="detailtCloums" stripe   style="margin-top: 20px"></Table>

        <div slot="footer">
        </div>
      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios"
  import { VueEditor } from 'vue2-editor'

  export default {
      components:{
        VueEditor,
        },
        data() {
            return {

              sonTags:[],
              detail:false,
              detailData:[],//产品详情
              detailtCloums:[
                {
                  title: '项目代码',
                  key: 'projectCode',
                  width:120,
                  align:"center"
                },
                {
                  title: '英文名称',
                  key: 'englishName',
                  width:120,
                  align:"center"
                },
                {
                  title: '中文名称',
                  key: 'chinaName',
                  width:120,
                  align:"center"
                },
                {
                  title: '单位',
                  key: 'unit',
                  width:60,
                  align:"center"
                },
                {
                  title: '精度',
                  key: 'precision',
                  width:60,
                  align:"center"
                },
                {
                  title: '结果类型',
                  key: 'resultType',
                  width:120,
                  align:"center"
                },
                {
                  title: '是否启用',
                  key: 'availableFlag',
                  width:100,
                  align:"center"
                },
                {
                  title: '实验方法',
                  key: 'experimentalMethod',
                  width:120,
                  align:"center"
                },
                {
                  title: '标本基本量',
                  key: 'specimenBasicContent',
                  width:100,
                  align:"center"
                },
                {
                  title: '标本复查量',
                  key: 'specimenReviewContent',
                  width:100,
                  align:"center"
                },
                {
                  title: '标本类型',
                  key: 'specimenType',
                  width:100,
                  align:"center"
                },
                {
                  title: '检测时间',
                  key: 'checkTime',
                  width:80,
                  align:"center"
                },
                {
                  title: '折扣价',
                  key: 'discountedPrice',
                  width:80,
                  align:"center"
                },
                {
                  title: '市场价',
                  key: 'marketPrice',
                  width:80,
                  align:"center"
                },
                {
                  title: '价格',
                  key: 'price',
                  width:60,
                  align:"center"
                }
              ],
              product:false,//配置产品模态框
              productName:"",
              productId:"",
              productData:[],
              productData2:[],
              tips:false,//提示模态框
              productRole:["未配置项目","已配置项目"],
              pic:true,
              pic1:true,
              content1: '',
              content2:"",
              formInline:{
                productName:"",//产品名称
                prdTypeId:"",//产品类型名称
                releaseFlag:""//是否上架
              },
              tagsArr:[],//标签
              tagsArr1:[],//标签
              add:false,
              addForm:{
                prdTypeId:"",
                productName:"",
                tag:[],
                serviceType:"",
                checkuserNum:"",
                limosis:"",
                limosisOther:"",
                marketPrice:"",
                price:"",
                specimenRequired:"",
                reportTime:"",
                prdUsers:"",
                samplingRequired:"",
                specimenSave:"",
                releaseFlag:"",
                productDes:"",
                clinicalValue:"",
                productFirstPic:"",//首焦图
                productGraphics:"",//产品图文
                specialFlag:"",
                sontag:[]
              },
              edit:false,
              editForm:{
                prdTypeId:"",
                productName:"",
                serviceType:"",
                checkuserNum:"",
                limosis:"",
                limosisOther:"",
                marketPrice:"",
                price:"",
                specimenRequired:"",
                reportTime:"",
                prdUsers:"",
                samplingRequired:"",
                specimenSave:"",
                releaseFlag:"",
                productDes:"",
                clinicalValue:"",
                productFirstPic:"",//首焦图
                productGraphics:"",//产品图文
                id:"",
                tag:[],
                specialFlag:"",
                sontag:[]
              },
              page:1,
              pageSize:10,
              placement:"bottom",//分页条数位置
              loading:true,
              total:0,
              tableData:[],
              cloums:[
                {
                  title: '产品类型名称',
                  key: 'prdTypeName',
                  width:200,
                  align:"center"
                },
                {
                  title: '产品名称',
                  key: 'productName',
                  width:200,
                  align:"center"
                },

                {
                  title: '标签名称',
                  key: 'prdTagsName',
                  width:200,
                  align:"center"
                },
                {
                  title: '服务类型名称',
                  key: 'serviceType',
                  width:200,
                  align:"center"
                },
                {
                  title: '产品可检验人数',
                  key: 'checkuserNum',
                  width:200,
                  align:"center"
                },
                {
                  title: '是否特检',
                  key: 'specialFlag',
                  width:200,
                  align:"center"
               },
                {
                  title: '是否空腹',
                  key: 'limosis',
                  width:200,
                  align:"center"
                },
                {
                  title: '是否空腹其他选项',
                  key: 'limosisOther',
                  width:200,
                  align:"center"
                },
                {
                  title: '产品描述',
                  key: 'productDes',
                  width:400,
                  align:"center",
                  ellipsis:true
                },
                {
                  title: '临床意义',
                  key: 'clinicalValue',
                  width:400,
                  align:"center",
                  ellipsis:true
                },
                {
                  title: '市场价',
                  key: 'marketPrice',
                  width:200,
                  align:"center"
                },
                {
                  title: '价格',
                  key: 'price',
                  width:200,
                  align:"center"
                },
                {
                  title: '标本要求',
                  key: 'specimenRequired',
                  width:200,
                  align:"center"
                },
                {
                  title: '出报告时间',
                  key: 'reportTime',
                  width:200,
                  align:"center"
                },
                {
                  title: '使用人群',
                  key: 'prdUsers',
                  width:200,
                  align:"center"
                },
                {
                  title: '采样要求',
                  key: 'samplingRequired',
                  width:200,
                  align:"center"
                },
                {
                  title: '标本保存',
                  key: 'specimenSave',
                  width:200,
                  align:"center"
                },
                {
                  title: '是否上架',
                  key: 'releaseFlag',
                  width:200,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:200,
                  align:"center"
                },
                {
                  title: '更新人',
                  key: 'updater',
                  width:120,
                  align:"center"
                },
                {
                  title: '操作',
                  width:250,
                  align:"center",
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"primary",
                          size:"small"
                        },
                        style:{
                          marginRight:"5px"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row);
                            let _this = this;
                            this.edit = true;

                            this.editForm.prdTypeId = params.row.prdTypeId;
                            this.selectTagById(this.editForm.prdTypeId);
                            //selectTagById(val)
                            //this.editForm.tag =params.row.prdTagsId;
                            this.editForm.productName = params.row.productName;
                            for(let i=0;i<this.serviceTypeArr.length;i++){
                              if( params.row.serviceType==this.serviceTypeArr[i].dataName){
                                this.editForm.serviceType = this.serviceTypeArr[i].dataCode;
                              }
                            }

                            this.editForm.checkuserNum = params.row.checkuserNum;
                            this.editForm.limosis = params.row.limosis=="是"?"1":"0";
                            this.editForm.limosisOther = params.row.limosisOther;
                            this.editForm.productDes = params.row.productDes;
                            this.editForm.clinicalValue = params.row.clinicalValue;
                            this.editForm.productFirstPic = params.row.firstPicture;
                            this.content2 = params.row.productPicture;
//                            console.log( this.content2)
                            this.editForm.marketPrice = params.row.marketPrice;
                            this.editForm.price = params.row.price;
                            for(let i=0;i<this.specimenTypeArr.length;i++){
                              if( params.row.specimenRequired == this.specimenTypeArr[i].dataName){
                                this.editForm.specimenRequired = this.specimenTypeArr[i].dataCode;
                              }
                            }
                            this.editForm.reportTime = params.row.reportTime;
                            for(let i=0;i<this.prdUsersArr.length;i++){
                              if( params.row.prdUsers==this.prdUsersArr[i].dataName){
                                this.editForm.prdUsers = this.prdUsersArr[i].dataCode;
                              }
                            }
                            this.editForm.samplingRequired = params.row.samplingRequired;
                            this.editForm.specimenSave = params.row.specimenSave;
                            this.editForm.releaseFlag = params.row.releaseFlag=="上架"?"1":"0";
                            this.editForm.id = params.row.id;
                            this.editForm.specialFlag =  params.row.specialFlag=="是"?"1":"0";
                            _this.editForm.tag =params.row.firstTagId? params.row.firstTagId.split(','):'';
                            let tagArr = [];
                            for(let i = 0;i<_this.editForm.tag.length;i++){
                              tagArr.push(parseInt(_this.editForm.tag[i]))
                            }
                            _this.editForm.tag = tagArr;
                            this.selectSonTag(tagArr);
                            _this.editForm.sontag = params.row.secondTagId?params.row.secondTagId.split(','):'';
                            let sonArr = [];
                            for(let i = 0;i<_this.editForm.sontag.length;i++){
                              sonArr.push(parseInt(_this.editForm.sontag[i]))
                            }
                            _this.editForm.sontag = sonArr;
                          }
                        }
                      },"编辑"),
                      h("Button",{
                        props:{
                          type:"error",
                          size:"small"
                        },
                        style:{
                          marginRight:"5px"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            this.product = true;
                            var qs = require("qs");
                            this.productId = params.row.id;
                            this.productName = params.row.productName;
                            var param =  qs.stringify({
                              productId:params.row.id
                            })
                            axios.post("/product/assignProductProject",param).then((res)=>{
                                if(res.data.code =="000000"){
                                  this.productData = [];
                                  this.productData2 = [];
                                  for(let i = 0;i<res.data.data.unAssignProjectList.length;i++){
                                    this.productData.push({
                                      key: res.data.data.unAssignProjectList[i].id,
                                      label:res.data.data.unAssignProjectList[i].chinaName
                                    })
                                  }

                                  for(let i = 0;i<res.data.data.assignProjectList.length;i++){
                                    this.productData.push({
                                      key: res.data.data.assignProjectList[i].id,
                                      label:res.data.data.assignProjectList[i].chinaName
                                    })
                                    this.productData2.push(res.data.data.assignProjectList[i].id)
                                  }
                                }else{
                                  this.$Notice.error({title:res.data.msg});
                                }
                            })
                          }
                        }
                      },"配置项目"),
                      h("Button",{
                        props:{
                          type:"success",
                          size:"small"
                        },
                        style:{
                          marginRight:"5px"
                        },
                        on:{
                          click:()=>{
                            this.detail = true;
                            let qs = require("qs");
                            let param = qs.stringify({
                              productId:params.row.id
                            });
                            axios.post("/product/selectBusProjectList",param).then((res)=>{
                                if(res.data.code=="000000"){
                                  for(let i = 0;i<res.data.data.length;i++){
                                    res.data.data[i].availableFlag = res.data.data[i].availableFlag=="1"?"启用":"未启用";
                                    for(let j=0;j<this.specimenTypeArr.length;j++){
                                      if(res.data.data[i].specimenType == this.specimenTypeArr[j].dataCode){
                                        res.data.data[i].specimenType = this.specimenTypeArr[j].dataName;
                                      }
                                    }
                                    for(let j=0;j<this.resultTypeArr.length;j++){
                                      if(res.data.data[i].resultType == this.resultTypeArr[j].dataCode){
                                        res.data.data[i].resultType = this.resultTypeArr[j].dataName;
                                      }
                                    }
                                  }

                                  this.detailData = res.data.data;
                                }else{
                                  this.$Notice.error({title:res.data.msg});
                                }
                            })
                          }
                        }
                      },"项目详情")
                    ])
                  }
                },
              ],
              serviceTypeArr:[],//服务类型
              specimenTypeArr:[],//标本类型
              prdUsersArr:[],//使用人群
              ProductTypeListArr:[],//产品类型
              resultTypeArr:[],//结果类型
            }
        },
      mounted(){
          this.preData();
          this.init();
      },

      methods:{
        preData(){
          let qs = require("qs");
          let param1 = qs.stringify({
            dictType:"service_type"
          });
          let param2 = qs.stringify({
            dictType:"specimen_type"
          });
          let param3 = qs.stringify({
            dictType:"prd_users"
          });
          let param4 = qs.stringify({
            dictType:"result_type"
          });
          axios.post("/common/dictDataList",param1).then((res)=>{
                      if(res.data.code=="000000"){
                        this.serviceTypeArr = res.data.data;
                      }else{
                        this.$Notice.error({title:res.data.msg});
                      }
          });
          axios.post("/common/dictDataList",param2).then((res)=>{
            if(res.data.code=="000000"){
              this.specimenTypeArr = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          });
          axios.post("/common/dictDataList",param3).then((res)=>{
            if(res.data.code=="000000"){
              this.prdUsersArr = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          });
          axios.post("/common/dictDataList",param4).then((res)=>{
            if(res.data.code=="000000"){
              this.resultTypeArr = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          });
          axios.post("/productType/selectProductTypeList").then((res)=>{
            if(res.data.code=="000000"){
              this.ProductTypeListArr = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        init(){
          let qs = require("qs");
          let param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            prdTypeId:this.formInline.prdTypeId,
            productName:this.formInline.productName,
            releaseFlag:this.formInline.releaseFlag
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/product/selectProductList",param).then((res)=>{
            if(res.data.code=="000000"){
                  this.loading = false;
                  this.total = res.data.count;
                  for(let i=0;i<res.data.data.length;i++){
                    res.data.data[i].releaseFlag = res.data.data[i].releaseFlag=="1"?"上架":"下架";
                    res.data.data[i].limosis = res.data.data[i].limosis=="1"?"是":"否";
                    res.data.data[i].specialFlag =  res.data.data[i].specialFlag=="1"?"是":"否";
                    for(let j=0;j<this.serviceTypeArr.length;j++){
                      if( res.data.data[i].serviceType==this.serviceTypeArr[j].dataCode){
                        res.data.data[i].serviceType = this.serviceTypeArr[j].dataName;
                      }
                    }
                    for(let j=0;j<this.prdUsersArr.length;j++){
                      if( res.data.data[i].prdUsers==this.prdUsersArr[j].dataCode){
                        res.data.data[i].prdUsers = this.prdUsersArr[j].dataName;
                      }
                    }
                    for(let j=0;j<this.specimenTypeArr.length;j++){
                      if( res.data.data[i].specimenRequired==this.specimenTypeArr[j].dataCode){
                        res.data.data[i].specimenRequired = this.specimenTypeArr[j].dataName;
                      }
                    }
                  }
                  this.tableData = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        onSubmit(){
          this.loading = true;
          this.init();
        },
        resetForm(){
              this.formInline.productName = "";
              this.formInline.prdTypeId = "";
              this.formInline.releaseFlag = "";
        },
        onAdd(){
          this.add = true;
        },
        addok(){
          this.addForm.productGraphics = this.content1.replace(/"/g, "'");
          let qs = require("qs");
           var params = qs.stringify({
             prdTypeId:this.addForm.prdTypeId,
             productName:this.addForm.productName,
             serviceType:this.addForm.serviceType,
             checkuserNum:this.addForm.checkuserNum,
             limosis:this.addForm.limosis,
             limosisOther:this.addForm.limosisOther,
             productDes:this.addForm.productDes,
             clinicalValue:this.addForm.clinicalValue,
             firstPicture:this.addForm.productFirstPic,
            productPicture:this.addForm.productGraphics,
            marketPrice:this.addForm.marketPrice,
            price:this.addForm.price,
            specimenRequired:this.addForm.specimenRequired,
            reportTime:this.addForm.reportTime,
            prdUsers:this.addForm.prdUsers,
            samplingRequired:this.addForm.samplingRequired,
            specimenSave:this.addForm.specimenSave,
            releaseFlag:this.addForm.releaseFlag,
             firstTagId:this.addForm.tag?this.addForm.tag.join(','):'',
             secondTagId:this.addForm.sontag?this.addForm.sontag.join(','):'',
             specialFlag:this.addForm.specialFlag
           });
           axios.post("/product/saveProduct",params).then((res)=>{
             if(res.data.code=="000000"){
               this.$Notice.success({title:"添加成功"});
               this.addForm.prdTypeId = "";
                 this.addForm.productName = "";
                 this.addForm.serviceType = "";
                 this.addForm.checkuserNum = "";
                 this.addForm.limosis = "";
                 this.addForm.limosisOther = "";
                 this.addForm.productDes = "";
                 this.addForm.clinicalValue = "";
                 this.addForm.productFirstPic = "";
                 this.addForm.productGraphics = "";
                 this.addForm.marketPrice = "";
                 this.addForm.price = "";
                 this.addForm.specimenRequired = "";
                 this.addForm.reportTime = "";
                 this.addForm.prdUsers = "";
                 this.addForm.samplingRequired = "";
                 this.addForm.specimenSave = "";
                 this.addForm.releaseFlag = "";
               this.addForm.specialFlag = "";
               this.init();
             }else{
               this.$Notice.error({title:res.data.msg});
             }
           })
        },
        editok(){
          this.editForm.productGraphics = this.content2;
          var qs = require("qs");
          var params = qs.stringify({
            prdTypeId:this.editForm.prdTypeId,
            productName:this.editForm.productName,
            serviceType:this.editForm.serviceType,
            checkuserNum:this.editForm.checkuserNum,
            limosis:this.editForm.limosis,
            limosisOther:this.editForm.limosisOther,
            productDes:this.editForm.productDes,
            clinicalValue:this.editForm.clinicalValue,
            firstPicture:this.editForm.productFirstPic,
            productPicture:this.editForm.productGraphics,
            marketPrice:this.editForm.marketPrice,
            price:this.editForm.price,
            specimenRequired:this.editForm.specimenRequired,
            reportTime:this.editForm.reportTime,
            prdUsers:this.editForm.prdUsers,
            samplingRequired:this.editForm.samplingRequired,
            specimenSave:this.editForm.specimenSave,
            releaseFlag:this.editForm.releaseFlag,
            id:this.editForm.id,

            specialFlag:this.editForm.specialFlag,
            firstTagId:this.editForm.tag?this.editForm.tag.join(','):'',
            secondTagId:this.editForm.sontag?this.editForm.sontag.join(','):'',
          });
          axios.post("/product/updateProduct",params).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"修改成功"});
              this.editForm.prdTypeId = "";
              this.editForm.productName = "";
              this.editForm.serviceType = "";
              this.editForm.checkuserNum = "";
              this.editForm.limosis = "";
              this.editForm.limosisOther = "";
              this.editForm.productDes = "";
              this.editForm.clinicalValue = "";
              this.editForm.productFirstPic = "";
              this.editForm.productGraphics = "";
              this.editForm.marketPrice = "";
              this.editForm.price = "";
              this.editForm.specimenRequired = "";
              this.editForm.reportTime = "";
              this.editForm.prdUsers = "";
              this.editForm.samplingRequired = "";
              this.editForm.specimenSave = "";
              this.editForm.releaseFlag = "";
              this.editForm.tag = "";
              this.editForm.specialFlag = "";
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        uploadSucc(response, file, fileList){
          this.addForm.productFirstPic = response.data;
          this.pic = false;
        },
        uploadSucc1(response, file, fileList){
          this.editForm.productFirstPic = response.data;
          this.pic1 = false;
        },
        changePage(page){
          this.loading = true;
          this.page = page;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.loading = true;
          this.pageSize = size;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        productok(){
          this.tips = true;
        },
        tipsok(){
          var qs = require("qs");
          var params = qs.stringify({
            productId:this.productId,
            productName:this.productName,
            projectIds:this.productData2.join(",")
          })
          axios.post("/product/saveProductProject",params).then((res)=>{
            if(res.data.code=="000000"){
              this.$Notice.success({title:"配置成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        handleChange2 (newTargetKeys) {
          this.productData2 = newTargetKeys;
        },
        filterMethod (data, query) {
          return data.label.indexOf(query) > -1;
        },
        selectSonTag(val){
          console.log('标签id：'+val)
          if(val&&val!=''){
            let qs = require("qs");
            let param = qs.stringify({
              tagIdStr:val.join(',')
            });
            axios.post("/label/productTypeSecond",param).then((res)=>{
              if(res.data.code =="000000"){
                this.sonTags = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            })
          }
        },
        selectTagById(val){
          if(val){
            let qs = require("qs");
            let param = qs.stringify({
              productTypeId:val
            });
            axios.post("/label/productTypeFirst",param).then((res)=>{
              if(res.data.code =="000000"){
                this.tagsArr = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            })
          }
        },
        // selectSonTag1(){
        //   if(this.editForm.tag&&this.editForm.tag!=''){
        //     let qs = require("qs");
        //     let param = qs.stringify({
        //       tagIdStr:this.editForm.tag.join(',')
        //     });
        //     axios.post("/label/productTypeSecond",param).then((res)=>{
        //       if(res.data.code =="000000"){
        //         this.sonTags1 = res.data.data;
        //       }else{
        //         this.$Notice.error({title:res.data.msg});
        //       }
        //     })
        //   }
        // },
        // selectTagById1(val){
        //   if(val){
        //     let qs = require("qs");
        //     let param = qs.stringify({
        //       productTypeId:val
        //     });
        //     axios.post("/label/productTypeFirst",param).then((res)=>{
        //       if(res.data.code =="000000"){
        //         this.tagsArr1 = res.data.data;
        //       }else{
        //         this.$Notice.error({title:res.data.msg});
        //       }
        //     })
        //   }
        // },
        //富文本编辑框内部上传
        handleImageAdded: function(file, Editor, cursorLocation) {
          let formData = new FormData();
          formData.append('file', file)
          axios({
            url:"https://wx.ailabcare.com/clinicalmall-web/file/upload",
            method: 'POST',
            data: formData
          }).then((result) => {
            let url = result.data.data;//后台异步返回URL
            console.log(url)
            Editor.insertEmbed(cursorLocation, 'image', url);
          }).catch((err) => {
            console.log(err);
          })
        },
      }
    }
</script>
<style>

</style>
